<%--
  Created by IntelliJ IDEA.
  User: Ren
  Date: 2022/10/16
  Time: 20:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工页面</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <link type="text/css" rel="stylesheet" href="/css/moregood.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
    <style>
        .demo-table-expand {
            font-size: 0;
        }

        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }

        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
    </style>
</head>
<body>
<div id="app">


    <div>
        <el-button type="success" @click="add">添加用户</el-button>
    </div>


    <div style="position: absolute;top: 6px;left: 418px;">
        <el-form :inline="true" :model="doctorVo" class="demo-form-inline">
            <el-form-item label="账号/姓名">
                <el-input v-model="doctorVo.dName" placeholder="账号/姓名"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="doctorVo.dTelphone" placeholder="手机号"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
    </div>


    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :cell-style="styleBack"
                :header-cell-style="getRowClass"

        >
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">


                        <el-form-item label="身份证号">
                            <span>{{ props.row.dIdcard }}</span>
                        </el-form-item>

                        <el-form-item label="教育背景">
                            <span>{{ props.row.dEducation }}</span>
                        </el-form-item>

                        <el-form-item label="所属科室">
                            <span>{{ props.row.tName }}</span>
                        </el-form-item>

                        <el-form-item label="所属部门">
                            <span>{{ props.row.deptName }}</span>
                        </el-form-item>

                        <el-form-item label="医治方向">
                            <span>{{ props.row.dMajor }}</span>
                        </el-form-item>

                        <el-form-item label="主要成就">
                            <span>{{ props.row.dAchievement }}</span>
                        </el-form-item>

                    </el-form>
                </template>
            </el-table-column>

            <el-table-column
                    label="医生编号"
                    width="100"
                    prop="dId">

            </el-table-column>

            <el-table-column
                    label="医生姓名"
                    width="100"
                    prop="dName">

            </el-table-column>

            <el-table-column
                    label="年龄"
                    width="60"
                    prop="dAge">

            </el-table-column>

            <el-table-column
                    label="性别"
                    width="60"
                    prop="sex">

            </el-table-column>

            <el-table-column
                    prop="dHeadurl"
                    width="100"
                    label="头像">
                <template slot-scope="scope">
                    <img :src="scope.row.dHeadurl" width="80" height="80">
                </template>
            </el-table-column>

            <el-table-column
                    label="手机号"
                    width="130"
                    prop="dTelphone">
            </el-table-column>


            <el-table-column
                    prop="dPassword"
                    label="密码" v-if="false">
            </el-table-column>
            <el-table-column
                    prop="dTid"
                    label="科室id" v-if="false">
            </el-table-column>


            <el-table-column
                    prop="dStatus"
                    label="医生状态"
                    width="100">
                <template slot-scope="scope">
                    <el-tag size="small" type="danger" v-if="scope.row.dStatus == 0">离职</el-tag>
                    <el-tag size="small" type="success" v-else-if="scope.row.dStatus == 1">在职</el-tag>
                    <el-tag size="small" v-else>暂未入职</el-tag>

                </template>
            </el-table-column>


            <el-table-column label="操作" width="250">
                <template slot-scope="scope">
                    <el-button :disabled="scope.row.dStatus == 0" @click="handleClick(scope.row)" type="danger"
                               size="small">删除
                    </el-button>
                    <el-button :disabled="scope.row.dStatus == 0" type="success" size="small"
                               @click="editDoctor(scope.row)">修改
                    </el-button>
                    <el-button :disabled="scope.row.dStatus == 0" type="success" size="small"
                               @click="showRoleDialog(scope.row.dId)">分配角色
                    </el-button>

                </template>
            </el-table-column>

            <el-table-column
                    prop="dStatus"
                    label="禁用和启用"
                    width="110">
                <template slot-scope="scope">
                    <!-- // value:绑定值  disabled:是否禁用   inactive-color:switch关闭时的背景色  active-color:switch打开时的背景色-->
                    <el-switch :value="scope.row.dStatus ==1"
                               @change="changeAutograph(scope)"
                               inactive-color="#A7A7A7" active-color="#17BF6D">

                    </el-switch>
                </template>
            </el-table-column>


        </el-table>

    </template>

    <%--分页--%>
    <div style="margin-top: 0.2rem; margin-left: 18.2rem;">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5,7,10]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>




    <%--为用户分配角色--%>
    <el-dialog
            title="分配角色"
            :visible.sync="dialogVisible01"
            width="30%"
            :before-close="handleClose">
        <el-checkbox-group v-model="checkRole">
            <el-checkbox v-for="role in roles" :label="role.roleId+''" :key="role.roleId+''">{{role.roleName}}
            </el-checkbox>
        </el-checkbox-group>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible01 = false">取 消</el-button>
            <el-button type="primary" @click="qr">确 定</el-button>
          </span>
    </el-dialog>


    <!--修改的弹出层dialogVisible:控制对话框的显示和隐藏-->
    <el-dialog
            title="修改提示"
            :visible.sync="dialogVisible"
            width="30%"
    >
        <!--:model:绑定表单数据-->
        <el-form label-width="80px" :model="editForm">


            <el-upload
                    style="border:1px solid #bcbec2; width: 100px;height: 100px;margin-left: 94px;margin-bottom: 20px;"
                    class="avatar-uploader"
                    action="/upload/up"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" width="100px" height="100px">
                <i v-else class="el-icon-plus avatar-uploader-icon" style="margin-left: 38px;margin-top: 41px;"></i>
            </el-upload>


            <el-form-item label="账号/名字" prop="dName">
                <el-input v-model="editForm.dName"></el-input>
            </el-form-item>

            <el-form-item label="年龄" prop="dAge">
                <el-input v-model="editForm.dAge"></el-input>
            </el-form-item>


            <el-form-item label="手机号" prop="dTelphone">
                <el-input v-model="editForm.dTelphone"></el-input>
            </el-form-item>


            <el-form-item label="性别" prop="sex" :data="SexAll">
                <el-select v-model="editForm.sex" placeholder="请选择性别" style="width: 100%">
                    <el-option
                            v-for="item in SexAll"
                            :key="item.id"
                            :label="item.name"
                            :value="item.sex">
                    </el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="科室号" prop="dTid" :data="keshiAll">
                <el-select v-model="editForm.dTid" placeholder="科室科室号" style="width: 100%">
                    <el-option
                            v-for="item in keshiAll"
                            :key="item.tId"
                            :label="item.tName"
                            :value="item.tId">
                    </el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="密码" prop="dPassword">
                <el-input v-model="editForm.dPassword"></el-input>
            </el-form-item>

            <el-form-item label="身份证号" prop="dIdcard">
                <el-input v-model="editForm.dIdcard"></el-input>
            </el-form-item>


            <el-form-item label="教育背景" prop="dEducation">
                <el-select v-model="editForm.dEducation" placeholder="请选择性别" style="width: 100%">
                    <el-option>博士研究生</el-option>
                    <el-option>研究生</el-option>
                    <el-option>本科</el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="主治" prop="dMajor">
                <el-input v-model="editForm.dMajor"></el-input>
            </el-form-item>

            <el-form-item label="主治描述" prop="dMajorDesc">
                <el-input v-model="editForm.dMajorDesc"></el-input>
            </el-form-item>

            <el-form-item label="主要成就" prop="dAchievement">
                <el-input v-model="editForm.dAchievement"></el-input>
            </el-form-item>


        </el-form>

        <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmUpdate">确认修改</el-button>
        </span>
    </el-dialog>


    <!--添加的弹出层dialogVisible:控制对话框的显示和隐藏-->
    <el-dialog
            title="添加信息"
            :visible.sync="dialogVisible1"
            width="30%"
    >
        <!--:model:绑定表单数据-->
        <el-form label-width="80px" :model="addForm" ref="addFormRef">

            <el-upload
                    style="border:1px solid #bcbec2; width: 100px;height: 100px;margin-left: 94px;margin-bottom: 20px;"
                    class="avatar-uploader"
                    action="/upload/up"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl1" :src="imageUrl1" class="avatar" width="100px" height="100px">
                <i v-else class="el-icon-plus avatar-uploader-icon" style="margin-left: 38px;
margin-top: 41px;"></i>
            </el-upload>

            <el-form-item label="账号/名字" prop="dName">
                <el-input v-model="addForm.dName"></el-input>
            </el-form-item>

            <el-form-item label="年龄" prop="dAge">
                <el-input v-model="addForm.dAge"></el-input>
            </el-form-item>


            <el-form-item label="手机号" prop="dTelphone">
                <el-input v-model="addForm.dTelphone"></el-input>
            </el-form-item>


            <el-form-item label="科室号" prop="dTid" :data="keshiAll">
                <el-select v-model="addForm.dTid" placeholder="科室科室号" style="width: 100%">
                    <el-option
                            v-for="item in keshiAll"
                            :key="item.tId"
                            :label="item.tName"
                            :value="item.tId">
                    </el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="性别" prop="sex" :data="SexAll">
                <el-select v-model="editForm.sex" placeholder="请选择性别" style="width: 100%">
                    <el-option
                            v-for="item in SexAll"
                            :key="item.id"
                            :label="item.name"
                            :value="item.sex">
                    </el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="密码" prop="dPassword">
                <el-input v-model="addForm.dPassword"></el-input>
            </el-form-item>

            <el-form-item label="身份证号" prop="dIdcard">
                <el-input v-model="addForm.dIdcard"></el-input>
            </el-form-item>


            <el-form-item label="教育背景" prop="dEducation">
                <el-select v-model="addForm.dEducation" placeholder="请选择学历" style="width: 100%">
                    <el-option>博士研究生</el-option>
                    <el-option>研究生</el-option>
                    <el-option>本科</el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="主治" prop="dMajor">
                <el-input v-model="addForm.dMajor"></el-input>
            </el-form-item>

            <el-form-item label="主治描述" prop="dMajorDesc">
                <el-input v-model="addForm.dMajorDesc"></el-input>
            </el-form-item>

            <el-form-item label="主要成就" prop="dAchievement">
                <el-input v-model="addForm.dAchievement"></el-input>
            </el-form-item>


        </el-form>


        <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible1 = false">取 消</el-button>
                        <el-button type="primary" @click="qrtj()" :visible.sync="dialogVisible1">确认添加</el-button>
        </span>
    </el-dialog>


</div>
</body>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            keshiAll:[],
            SexAll: [],
            //添加和修改
            dialogVisible: false,
            dialogVisible1: false,
            //定义添加表单的数据变量
            addForm: {},
            //定义修改表单的数据变量
            editForm: {},
            //文件上传与回显用到的url地址
            imageUrl: "",
            imageUrl1: "",


            tableData: [],
            doctorVo: {},
            //默认分页数据的当前页
            currentPage: 1,
            //默认分页数据的当前页有几条数据
            pageSize: 5,
            total: 0,

            //选中的id值
            checkRole: [],
            //所有的角色
            roles: [],
            dialogVisible01: false,
            //用户id
            dId: 0,
            officeVo:{},

        },
        created() {
            this.initTable();
            this.intosex();
            this.initkeshi();
        },
        methods: {
            //初始化科室
            initkeshi(){
                axios.post("/TechnicalOffice/select?currentPage=1"  + "&pageSize=50",this.officeVo).then(resp => {
                    console.log(resp)

                    this.keshiAll = resp.data.data.list;

                })
            },

            //查询
            onSubmit() {
                this.initTable();

            },
            //添加
            add() {
                this.imageUrl1 = null;
                this.dialogVisible1 = true;
            },
            //确认添加
            qrtj() {
                this.addForm.dHeadurl = this.imageUrl1;
                axios.post("/doctor/add", this.addForm).then(result => {
                    if (result.data.code === 200) {
                        this.$message.success("添加员工信息成功")
                        //关闭弹出层
                        this.dialogVisible1 = false;
                        //重新加在表格数据
                        this.initTable();
                        this.imageUrl1 = "";
                        this.$refs.addFormRef.resetFields();
                    }
                })
            },


            //上传头像成功后的处理
            handleAvatarSuccess(res, file) {
                this.imageUrl = res.data;
                this.imageUrl1 = res.data;
            },
            //在上传之前执行的函数，用来回显头像数据
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 10;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },


            //禁用功能的实现
            changeAutograph(scope) {

                axios.get("/doctor/changestatus?dId=" + scope.row.dId + "&dStatus=" + scope.row.dStatus).then(resp => {
                    this.$message.success("修改状态成功");
                    this.initTable();
                })

            },

            //确认分配角色
            qr() {

                axios.post("/role/qr?dId=" + this.dId + "&roleIds=" + this.checkRole).then(resp => {
                    this.$message.success("分配成功");
                    this.dialogVisible01 = false;
                })

            },

            showRoleDialog(dId) {
                this.dId = dId;
                this.dialogVisible01 = true;
                //1. 查询所有的角色
                //2.当前用户具有的角色id
                axios.get("/role/list?dId=" + dId).then(resp => {
                    this.roles = resp.data.data.list;
                    this.checkRole = resp.data.data.roleIds;

                })
            },


            //删除
            handleClick(row) {
                axios.get("/doctor/del?dId=" + row.dId).then(resp => {
                    if (resp.data.code === 200) {
                        this.$message.success("删除成功");
                        this.initTable();
                    }
                })
            },
            //修改按钮触发事件
            editDoctor(row) {
                //1.显示对话框
                this.dialogVisible = true;
                console.log(row)
                //回显图片
                this.imageUrl = row.dHeadurl
                //在此转json是为了把数据固定阻断双向绑定里面的数据同步
                let parse = JSON.parse(JSON.stringify(row));
                this.editForm = parse;
            },
            //修改对话框的事件
            //确认修改
            confirmUpdate() {

                //提交到后台应该是修改之后的头像的url地址，需要重新赋值一下
                this.editForm.dHeadurl = this.imageUrl;
                axios.post("/doctor/update", this.editForm).then(result => {
                    if (result.data.code === 200) {
                        this.$message.success("修改员工信息成功")
                        //关闭弹出层
                        this.dialogVisible = false;
                        //重新加在表格数据
                        this.initTable();
                    }
                })
            },


            //初始化数据
            initTable() {
                axios.post("/doctor/all?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize, this.doctorVo).then(resp => {
                    console.log(resp)
                    this.tableData = resp.data.data.list;
                    this.total = resp.data.data.total;
                });
            },


            //关闭对话
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            //性别
            intosex() {
                axios.get("/sex/all").then(resp => {

                    if (resp.data.code === 200) {
                        this.SexAll = resp.data.data
                    }
                })
            },

            //分页设置每页多少条数据
            handleSizeChange(val) {

                this.pageSize = val;
                this.initTable();

            },

            //当当前页数改变时，查找当前页和当前设置的每页多少条数据
            handleCurrentChange(val) {

                this.currentPage = val
                this.initTable();
            },


            // 表格奇偶层样式
            styleBack({ row, column, rowIndex, columnIndex }) {
                if ((rowIndex + 1) % 2 === 0) {
                    return "background:#053c4a; color:#fff;border:1px solid #053c4a";
                } else {
                    return "background:#042831; color:#fff;border:1px solid #042831";
                }
            },
            // 表头样式
            getRowClass({ rowIndex }) {
                return "background:#053c4a; color:#fff;border:3px solid #053c4a";
            },



        }

    })
</script>
</html>
